<template>
	<view class="app-container">
		
		<view class="pd-26 main-info">
			<view class="flex">
				<text class="flex1">套餐名称:</text>
				<text class="goods">{{order.companyinfo.name}}{{order.goodsinfo.name}}</text>
			</view>
			<view class="flex">
				<text class="flex1">订单编号:</text>
				<text>{{order.sn1}}</text>
			</view>
			<view class="flex">
				<text class="flex1">订单状态:</text>
				<text>{{orderState}}</text>
			</view>
		</view>
		
		
		<view class="radius-10 white-bg pd-30 pd-bottom-40">
			<view class="flex line">
				<text class="flex1">预约人姓名:</text>
				<text>{{order.user_name}}</text>
			</view>
			<view class="flex line">
				<text class="flex1">预约人手机:</text>
				<text>{{order.mobile1}}</text>
			</view>
			
			<view class="flex line">
				<text class="flex1">拍摄人姓名:</text>
				<text>{{order.photoer_name ? order.photoer_name : order.user_name}}</text>
			</view>
			<view class="flex line">
				<text class="flex1">拍摄人手机:</text>
				<text>{{order.photoer_mobile ? order.photoer_mobile : order.mobile2}}</text>
			</view>
			
			<view class="flex line">
				<text class="flex1">预约门店：</text>
				<text>{{order.shopinfo.name}}</text>
			</view>
			<view class="flex line">
				<text class="flex1">到店时间：</text>
				<text>{{order.time}}</text>
			</view>
			<view class="flex line">
				<text class="flex1">预约码：</text>
				<text>{{order.card}}</text>
			</view>
			<view class="flex">
				<text class="flex1">备注信息：</text>
				<text>{{order.note}}</text>
			</view>
		</view>
		<view class="mg-top-50 flex">
			<my-button title="联系客服" style="width: 30vw;" class="mg-right-10" @click="callKefu"></my-button>
			<navigator :url="'../my/index?uid=' + order.user_id" class="flex1">
				<my-button  title="前往个人中心" @click="toEdit" line-height="100rpx" bg-color="#FF7A28" color="#fff" radius="24rpx"></my-button>
			</navigator>
		</view>
	</view>
</template>

<script>
	import moment from 'moment'
	import OrderApi from '@/api/order.js'
	import callmobile from '@/utils/mobile.js'
	export default {
		data() {
			return {
				order: {
					sn: '',
					sn1: '',
					user_name: '',
					user_id: '',
					mobile: '',
					photoer_name: '',
					photoer_mobile: '',
					note: '',
					time: '',
					update_count: 0,
					cardinfo: {
						code_inner: '',
						pass_inner: ''
					},
					companyinfo: {
						name: '',
					},
					goodsinfo: {
						name: ''
					},
					shopinfo: {
						name: ''
					}
				}
			};
		},
		computed:{
			orderState() {
				let order = this.order;
				if (order.outTime) {
					return '已过期';
				} else if (order.refund == 2) {
					return "已退款";
				} else if (order.refund == 1) {
					return '退款申请中';
				} else if (order.finish_at) {
					return '服务结束';
				} else if (order.confirm_at) {
					return '等待拍摄';
				} else {
					return '预约确认中'
				}
			}
		},
		created() {
			this.order.sn = this.$route.query.sn
			this.getOrder()
		},
		methods: {
			getOrder() {
				OrderApi.detail(this.order.sn).then(res => {
					this.order = res.data
				})
			},
			toEdit() {
				// 两次修改机会
				if (this.order.update_count >= 3) {
					return uni.showToast({
						title: '两次修改机会已经用完了哦',
						icon:'none'
					})
				}
				// 48小时之前
				let orderTime = moment(this.order.time).valueOf();
				let nowTime = moment().valueOf();
				let hours = (orderTime - nowTime) / 3600;
				
				if (hours < 48) {
					return uni.showToast({
						title: '抱歉，已超过修改时间',
						icon: 'none'
					})
				}
				uni.navigateTo({
					url: './order-submit?sn=' + this.order.sn
				})
			},
			callKefu() {
				callmobile()
			}
		}
	}
</script>

<style lang="scss">
text{
	font-size: 28rpx;
	color: #666666;
	line-height: 90rpx;
}
.main-info text{
	line-height: 60rpx;
}
.goods{
	font-size: 36rpx;
	color: #232323;
}

.line{
	border-bottom: 1px solid #E9E9E9;
}
</style>
